<template>
  <div class="Recharge">
    <Header title="充值店铺"></Header>
    <scroller>
      <div style="padding:36px 12px 0 12px">
        <div style="padding:12px 6px;font-size: 14px;">
          <div style="font-weight: 600;font-size: 15px">
            尊敬的用户，选择你常去的书吧:
          </div>
          <div style="font-size:12px;color: #888;padding-top: 10px">
            温馨提示：选择常去书吧是为各位用户提供更加优质的服务，所有充值业务均可多店使用，请用户放心充值。
          </div>
        </div>
        <div
          style="height:65px;display: flex;align-items:center;background: #fff;padding: 0 12px;margin-top: 12px;border-radius: 5px"
          v-for="item in BookList">
          <div style="flex: 3;text-align: left;font-size: 14px;position: relative;padding-left: 30px">
            <img src="static/icon/my_icon_book@3x.png" style="width: 24px;position: absolute;left: 0;top: 1px;" alt="">{{item.name}}
          </div>
          <div style="flex: 1;text-align: right">
            <div class="givemoney" @click="givemoney(item)">充值</div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import Header from './../Header'
  import {mapState} from 'vuex'
  import {BookList} from '../../api/mine'

  export default {
    data () {
      return {
        BookList: []
      }
    },
    created () {
      BookList().then(res => {
        this.BookList = res.data.data
        this.selectShop = res.data.data[0]
      })
    },
    methods: {
      givemoney (item) {
        this.$router.push({
          name: 'RechargeType',
          query: {
            shopid: item.id,
            name: item.name
          }
        })
      }
    },
    components: {
      Header
    }
  }
</script>

<style lang='less' type="text/less">
  .Recharge {
    color: @font-color;
    .givemoney {
      height: 24px;
      background: @common-color;
      color: #fff;
      text-align: center;
      width: 68px;
      border-radius: 24px;
      line-height: 24px;
      font-size: 10px;
      float: right;
    }
  }


</style>
